<template>
  <view v-if="!isLoading" class="container" :style="'background-image:url('+$xyfun.image('/static/order_bg.png')+')'">
    <view class="flow">
      <view class="item">
        <view class="yz-iconfont yz-gouxuan tm2"></view>
        <text>{{common.lang.status0}}</text>
      </view>
      <view class="item">
        <view class="yz-iconfont yz-shangweichuli tm1" v-if="detail.status===1"></view>
        <view class="yz-iconfont yz-gouxuan tm2" v-else-if="detail.status>1"></view>
        <view class="yz-iconfont yz-yuanxingweixuanzhong" v-else></view>
        <text>{{common.lang.status1}}</text>
      </view>
      <view class="item">
        <view class="yz-iconfont yz-shangweichuli tm1" v-if="detail.status===2"></view>
        <view class="yz-iconfont yz-gouxuan tm2" v-else-if="detail.status>2"></view>
        <view class="yz-iconfont yz-yuanxingweixuanzhong" v-else></view>
        <text>{{common.lang.status2}}</text>
      </view>
      <view class="item">
        <view class="yz-iconfont yz-gouxuan tm2" v-if="detail.status>=3"></view>
        <view class="yz-iconfont yz-yuanxingweixuanzhong" v-else></view>
        <text>{{common.lang.status5}}</text>
      </view>
    </view>
    <view class="detail" style="margin-top: -50rpx">
      <view class="lists">
        <view class="item">
          <view class="tit">订单号</view>
          <view class="value">{{detail.order_sn}}</view>
        </view>
        <view class="item">
          <view class="tit">订单状态</view>
          <view class="value">{{detail.status_text}}</view>
        </view>
        <view class="item" v-if="detail.goods_amount>0">
          <view class="tit">商品费用</view>
          <view class="value">{{detail.goods_amount}}</view>
        </view>
        <view class="item" v-if="detail.delivery_amount>0">
          <view class="tit">运费</view>
          <view class="value">{{detail.delivery_amount}}</view>
        </view>
        <view class="item">
          <view class="tit">订单金额</view>
          <view class="value tc-r">
            <text class="ts-32 tb">￥{{detail.total_amount}}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="detail" v-if="detail.store">
      <view class="lists">
        <view class="item">
          <view class="tit">商家</view>
          <view class="value">{{detail.store.name}}</view>
        </view>
        <view class="item">
          <view class="tit">商家电话</view>
          <view class="value">{{detail.store.phone}}</view>
        </view>
        <view class="item">
          <view class="tit">商家地址</view>
          <view class="value">{{detail.store.city}}{{detail.store.address}}</view>
        </view>
      </view>
    </view>
    <view class="detail">
      <view class="lists">
        <view class="item">
          <view class="tit">收件人</view>
          <view class="value">{{detail.consignee}}</view>
        </view>
        <view class="item">
          <view class="tit">收件地址</view>
          <view class="value">{{detail.city}}{{detail.address}}</view>
        </view>
        <view class="item" v-if="detail.exp_num">
          <view class="tit">物流单号</view>
          <view class="value" @tap="$xyfun.copy(detail.exp_num)">{{detail.exp_num}}
          <text class="copy">复制</text>
          </view>
        </view>
      </view>
    </view>
    <view class="goods_detail detail" v-if="detail.item.length>0">
      <view class="goods_tit">
        商品列表
      </view>
      <view class="goods_list">
        <view class="goods_item" v-for="val in detail.item" @click.stop="$xyfun.to('/pages/shop/detail?id='+val.goods_id)">
          <image class="thumb" :src="$xyfun.image(val.goods_image)"></image>
          <view class="content">
            <view class="title">{{ val.goods_title }}</view>
            <view class="attrs">
              <view class="attr">{{val.goods_sku_text?val.goods_sku_text:''}}</view>
              <view> x {{val.buy_num}}</view>
            </view>
            <view class="total">
              单价：
              <text class="ts-24 tb tc-r">￥{{val.goods_price}}</text>
            </view>
          </view>
        </view>
      </view>
      <view class="goods_amount">总计￥：<text class="ts-32 tb tc-r">{{detail.goods_amount}}</text></view>
    </view>

    <payPop ref='payPop' @createOrder="repay"></payPop>

    <view class="tool" v-if="detail.status==0">
      <view @tap="goPay()">支付</view>
      <view @tap="reCreate()">重新下单</view>
    </view>
    <view class="tool" v-if="detail.status==2">
      <view @tap="takeDelivery()">收货</view>
    </view>
    <view class="tool" v-if="detail.status==3">
      <view @tap="evaluation()">评价</view>
    </view>

    <block>
      <view class="xy-modal-box xy-modal-box-center qrcode-model-box p-tb-20 p-lr-30 br-10 bg-w" :class="[commentShow?'xy-modal-show':'']">
        <view class="com_grade" v-if="commentShow">
          <view class="yz-iconfont yz-shoucang" :style="com_grade>=1?'color:#ff5722':''" @tap="com_grade=1"></view>
          <view class="yz-iconfont yz-shoucang" :style="com_grade>=2?'color:#ff5722':''" @tap="com_grade=2"></view>
          <view class="yz-iconfont yz-shoucang" :style="com_grade>=3?'color:#ff5722':''" @tap="com_grade=3"></view>
          <view class="yz-iconfont yz-shoucang" :style="com_grade>=4?'color:#ff5722':''" @tap="com_grade=4"></view>
          <view class="yz-iconfont yz-shoucang" :style="com_grade>=5?'color:#ff5722':''" @tap="com_grade=5"></view>
        </view>
        <view class="comment" v-if="commentShow">
          <textarea @input="commentInput" placeholder="请填写对商品的真实评价"></textarea>
          <view class="combut" @tap="comment_submit">提交评论</view>
        </view>
      </view>
      <view class="xy-modal-mask" :class="[commentShow?'xy-mask-show':'']" @tap="commentShow =!commentShow"></view>
    </block>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import payPop from "@/components/paypop/index.vue";
import Pay from "@/utils/pay";
export default {
  components: {payPop},
  data() {
    return {
      disable : false,
      isLoading : true,
      detail : [],
      id : '',

      com_grade: 5,
      comment: '',
      commentShow: false,
    };
  },
  async onLoad(options) {
    this.id = options.id;
    this.loadData();
  },
  computed: {
    ...mapState(['common'])
  },
  methods: {
    async loadData() {
      this.$api.post({
        url: '/goods_order/detail',
        loadingTip: '加载中...',
        data: {
          id : this.id
        },
        success: res => {
          this.isLoading = false;
          this.detail = res;
        }
      })
    },

    goPay() {
      this.$refs.payPop.showDiaLog(this.detail.total_fee)
    },

    repay(pay_type){
      var that = this;
      var pay = new Pay(pay_type, this.detail, 'letter');
      pay.payMehod().then((res)=>{
        that.disabled = false;
        that.$refs.payPop.disabled = false;
        pay.payResult(res);
      },(res)=>{
        that.$refs.payPop.disabled = false;
        if(pay_type != 'balance'){
          pay.payResult(res);
        }
      });
    },

    //重新下单
    reCreate(){
      this.$xyfun.to('/pages/letter/index?order_id='+this.detail.id+'&type='+this.detail.type);
    },

    // 确认收货
    takeDelivery(){
      this.$api.post({
        url: '/goods_order/take_delivery',
        data: {
          id: this.id,
        },
        success: res => {
          this.$xyfun.msg('确认收货成功');
          this.loadData();
        }
      });
    },

    evaluation(){
      this.commentShow = true;
    },

    //提交评论
    comment_submit(){
      var that = this;
      this.$api.post({
        url : '/goods_order/comment',
        loadingTip: '加载中...',
        data : {
          order_id : that.id,
          content : this.comment,
          star : this.com_grade
        },
        success: res=>{
          this.$xyfun.msg('评论成功');
          that.commentShow = false;
          that.loadData();
        }
      })
    },

    //写入评论
    commentInput(e){
      this.comment = e.detail.value;
    },

  }
}
</script>

<style lang="scss">
.container{
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-y: 300rpx;
  padding-bottom: 150rpx;
  min-height: 100vh;
  background-color: #fff;
}
.flow{
  display: flex;
  justify-content: space-between;
  background: linear-gradient(to bottom,$theme1,#fff);
  height: 300rpx;
  box-sizing: border-box;
  padding: 0 80rpx;
  position: relative;
  &:after{
    content: '';
    position: absolute;
    z-index: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 120rpx;
    background: rgba(255, 255, 255, 0.75);
    display: block;
    width: calc(100% - 240rpx);
    height: 5rpx;
  }
  .item{
    margin-top: 98rpx;
    height: 110rpx;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100rpx;
    z-index: 1;
    view{
      font-size: 45rpx;
      border-radius: 50%;
      width: 45rpx;
      height: 45rpx;
      text-align: center;
      margin-bottom: 20rpx;
      background: #fae9e5;
    }
    text{
      font-size: 28rpx;
    }
  }
}
.detail{
  width: 90%;
  margin: 20rpx auto 0 auto;
  background: rgba(255, 255, 255, 0.66);
  position: relative;
  z-index: 99;
  box-shadow: 0 0 30rpx rgba(0, 0, 0, 0.09);
  border-radius: 20rpx;
  overflow: hidden;
  padding-bottom: 10rpx;
}

.lists{
  padding: 0 40rpx;
  margin-top: 50rpx;
  .item{
    margin: 20rpx 0;
    display: flex;
    justify-content: space-between;
    .tit{
      font-size: 28rpx;
      font-weight: bold;
      white-space: nowrap;
      margin-right: 50rpx;
    }
    .value{
      font-size: 26rpx;
      .copy{
        margin-left: 20rpx;
        font-size: 22rpx;
        background: $theme1;
        color: #fff;
        padding: 3rpx 14rpx;
        border-radius: 20rpx;
      }
    }
  }
}

.goods_detail{
  padding: 0 40rpx;
  .goods_tit{
    margin-top: 50rpx;
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
  }
  .goods_list{
    .goods_item{
      display: flex;
      margin-bottom: 20rpx;
      .thumb{
        width: 180rpx;
        height: 180rpx;
        margin-right: 20rpx;
        border-radius: 10rpx;
      }
      .content{
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        .title{
          font-size: 24rpx;
        }
        .attrs{
          margin-top: 10rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .attr{
            background: $background-default;
            font-size: 20rpx;
            color: $font-color;
            padding: 0 20rpx;
            border-radius: 15rpx;
            margin-right: 20rpx;
          }
        }
        .total{
          font-size: 22rpx;
          margin-top: 50rpx;
          text-align: right;
        }
      }
    }
  }
  .goods_amount{
    font-size: 22rpx;
    text-align: right;
    border-top: 1rpx solid #ececec;
    margin-bottom: 20rpx;
    padding-top: 20rpx;
  }
}

.tool{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 99;
  opacity: 1;
  height: 90rpx;
  background: #fff;
  box-shadow: 10rpx -10rpx 20rpx rgba(208, 208, 208, 0.62);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  view{
    background: $theme1;
    width: 200rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 30rpx;
    color: #fff;
    font-size: 28rpx;
    text-align: center;
    margin-left: 20rpx;
  }
}

.com_grade{
  display: flex;
  margin-top: 30rpx;
  margin-bottom: 40rpx;
  view{
    font-size: 36rpx;
    margin-right: 20rpx;
    color: #c1c1c1;
  }
}

.comment{

  textarea{
    z-index: 0;
  }
  .combut{
    background: #ed8c1b;
    color: #fff;
    width: 300rpx;
    height: 50rpx;
    line-height: 50rpx;
    border-radius: 30rpx;
    text-align: center;
    float: right;
  }
}
</style>
